<template>
  <div class="app-container">
    <el-button :disabled="roles !== '系统管理员'" type="primary" icon="el-icon-plus" @click="addCollegeDialogVisible = true">新增学院</el-button>
    <el-button :disabled="roles !== '系统管理员'" type="primary" icon="el-icon-plus" @click="addProfessionDialogVisible = true">新增专业</el-button>
    <el-table
      :data="tableData"
      style="width: 100%;margin-left: 20px;margin-top: 20px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.professions" style="width: 100%">
            <el-table-column
              label="专业"
              align="center"
              prop="professionName"
            />
            <el-table-column
              label="班级数"
              align="center"
              prop="professionClasses"
            />
            <el-table-column
              label="创建日期"
              align="center"
              prop="createTime"
            />
            <el-table-column
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button :disabled="roles !== '系统管理员'" type="primary" size="small" icon="el-icon-edit" @click="editProfessionDialog(scope.row.professionId)">编辑</el-button>
                <el-popconfirm
                  confirm-button-text="好的"
                  cancel-button-text="不用了"
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定要删除吗？"
                  @confirm="deleteProfession(scope.row.professionId)"
                >
                  <el-button slot="reference" :disabled="roles !== '系统管理员'" type="danger" size="small" icon="el-icon-delete">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="学院名称"
        prop="collegeName"/>
      <el-table-column
        label="学院院长"
        align="center"
        prop="collegeDean"/>
      <el-table-column
        label="创建日期"
        prop="createTime"
        align="center"/>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button :disabled="roles !== '系统管理员'" type="primary" size="small" icon="el-icon-edit" @click="editCollege(scope.row.collegeId)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="您确定要删除吗？"
            @confirm="deleteCollege(scope.row.collegeId)"
          >
            <el-button slot="reference" :disabled="roles !== '系统管理员'" type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="editCollegeDialogVisible"
      title="修改学院信息"
      width="30%">
      <el-form v-model="collegeInfo">
        <el-form-item label="学院名称" style="margin-left: 40px">
          <el-input v-model="collegeInfo.collegeName" placeholder="请输入学院名称" style="width: 62%"/>
        </el-form-item>
        <el-form-item label="学院院长" style="margin-left: 40px">
          <el-input v-model="collegeInfo.collegeDean" placeholder="请输入学院院长" style="width: 62%"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCollegeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCollege">修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="editProfessionDialogVisible"
      title="修改专业信息"
      width="30%">
      <el-form v-model="professionInfo">
        <el-form-item label="专业名称" style="margin-left: 40px">
          <el-input v-model="professionInfo.professionName" placeholder="请输入专业名称" style="width: 62%"/>
        </el-form-item>
        <el-form-item label="班级数" style="margin-left: 40px">
          <el-input v-model="professionInfo.professionClasses" placeholder="请输入班级数" style="width: 62%;margin-left: 13px"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editProfessionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateProfession">修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="addCollegeDialogVisible"
      title="新增学院"
      width="30%">
      <el-form v-model="addCollege">
        <el-form-item label="学院名称" style="margin-left: 40px">
          <el-input v-model="addCollege.collegeName" placeholder="请输入学院名称" style="width: 62%"/>
        </el-form-item>
        <el-form-item label="学院院长" style="margin-left: 40px">
          <el-input v-model="addCollege.collegeDean" placeholder="请输入学院院长" style="width: 62%"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCollegeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCollegeDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="addProfessionDialogVisible"
      title="新增专业"
      width="30%">
      <el-form v-model="addProfession">
        <el-form-item label="专业名称">
          <el-input v-model="addProfession.professionName" placeholder="请输入专业名称" style="width: 62%" />
        </el-form-item>
        <el-form-item label="所属学院">
          <el-input v-model="addProfession.collegeName" placeholder="请输入专业名称" style="width: 62%" />
        </el-form-item>
        <el-form-item label="班级数量">
          <el-input v-model="addProfession.classes" placeholder="请输入专业名称" style="width: 62%" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addProfessionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProfessionDialog">确 定</el-button>
      </span>
    </el-dialog>
    <template>
      <div class="box">
        <!-- 1. 返回顶部 -->
        <div v-show="top" class="top" @click="isTop">
          <el-button circle size="small" type="primary" icon="el-icon-top" style="position: fixed;top: 650px;right: 20px;z-index: 99;"/>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import CollegeApi from '../../api/college'
import ProfessionApi from '../../api/profession'
import { mapGetters } from 'vuex'
export default {
  name: 'College',
  data() {
    return {
      top: false,
      tableData: [],
      editCollegeDialogVisible: false,
      editProfessionDialogVisible: false,
      addCollegeDialogVisible: false,
      addProfessionDialogVisible: false,
      addCollege: {
        collegeName: '',
        collegeDean: ''
      },
      addProfession: {
        professionName: '',
        collegeName: '',
        classes: 0
      },
      collegeInfo: {},
      professionInfo: {},
      selectCollegeId: 0,
      selectProfessionId: 0
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  mounted() {
    window.addEventListener('scroll', () => { // 滚动事件
      const html = document.documentElement
      if (html.scrollTop >= 100) { // 当滚动高度大于等于100返回顶部出现
        this.top = true
      } else {
        this.top = false
      }
    })
  },
  created() {
    this.getCollegeListDetail()
  },
  methods: {
    isTop() {
      //  document.documentElement.scrollTop=0
      const html = document.documentElement
      const timer = setInterval(() => {
        if (html.scrollTop <= 0) {
          clearInterval(timer)
        }
        html.scrollTop = html.scrollTop - 20
      }, 10)
    },
    getCollegeListDetail() {
      CollegeApi.getCollegeListDetail().then(response => {
        this.tableData = response.data
        this.tableData.forEach((college) => {
          college.createTime = new Date(college.createTime).toLocaleDateString()
          college.professions.forEach((item) => { item.createTime = new Date(item.createTime).toLocaleDateString() })
        })
      })
    },
    deleteCollege(id) {
      CollegeApi.removeCollege(id).then(response => {
        this.$message.success('删除成功！')
        this.getCollegeListDetail()
      }).catch(() => {
        this.$message.error('删除失败，请重试！')
      })
    },
    deleteProfession(id) {
      ProfessionApi.removeProfession(id).then(response => {
        this.$message.success('删除成功！')
        this.getCollegeListDetail()
      }).catch(() => {
        this.$message.error('删除失败，请重试！')
      })
    },
    editCollege(id) {
      this.editCollegeDialogVisible = true
      this.selectCollegeId = id
      this.getCollegeInfo()
    },
    editProfessionDialog(id) {
      this.editProfessionDialogVisible = true
      this.selectProfessionId = id
      this.getProfessionInfo()
    },
    updateCollege() {
      CollegeApi.updateCollege(this.collegeInfo).then(response => {
        this.$message.success('更新成功！')
        this.getCollegeListDetail()
        this.editCollegeDialogVisible = false
      }).catch(() => {
        this.$message.error('更新失败！')
        this.editCollegeDialogVisible = false
      })
    },
    updateProfession() {
      ProfessionApi.updateProfession(this.professionInfo).then(response => {
        this.$message.success('专业信息修改成功！')
        this.getCollegeListDetail()
        this.editProfessionDialogVisible = false
      }).catch(() => {
        this.$message.error('专业信息修改失败！')
        this.editProfessionDialogVisible = false
      })
    },
    getCollegeInfo() {
      CollegeApi.getCollegeInfo(this.selectCollegeId).then(response => {
        this.collegeInfo = response.data
      })
    },
    getProfessionInfo() {
      ProfessionApi.getProfessionInfo(this.selectProfessionId).then(response => {
        this.professionInfo = response.data
      })
    },
    addCollegeDialog() {
      CollegeApi.addCollege(this.addCollege).then(response => {
        this.$message.success('添加学院成功！')
        this.addCollegeDialogVisible = false
        this.getCollegeListDetail()
      }).catch(() => {
        this.$message.error('添加学院失败！')
        this.addCollegeDialogVisible = false
      })
    },
    addProfessionDialog() {
      ProfessionApi.addProfession(this.addProfession).then(response => {
        this.$message.success('新增专业成功！')
        this.getCollegeListDetail()
        this.addProfessionDialogVisible = false
      }).catch(() => {
        this.$message.error('新增专业失败！')
        this.addProfessionDialogVisible = false
      })
    }
  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
